<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>小疯子博客系统</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="/bootstrap-table/bootstrap-table.css">

    <!-- jQuery -->
    <script src="/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- alert -->
    <script src="/js/alert.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/adminlte/dist/js/adminlte.min.js"></script>
    <script src="/bootstrap-table/bootstrap-table.js"></script>
    <script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

</head>
<body>
<div class="wrapper">
    <div id="updateDiv" style="display: none">
        <input id="alert" type="button" value="Alert" />
        <input id="confirm" type="button" value="Confirm" />
    </div>
    <!-- head view -->
    <#include "/common/head.ftl" />
    <!-- left view -->
    <#include "/common/left.ftl" />

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">文章管理</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div id="toolbar" class="btn-group">
                            <button id="btn_insert" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>新增
                            </button>
                            <button id="btn_delete" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                            </button>
                        </div>
                        <table id="table" style="background-color: ActiveBorder"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main Footer -->
    <#include "/common/foot.ftl" />
</div>
</body>
<script>
        let $table;
        //初始化加载table
        function initMainTable() {
            $table = $('#table').bootstrapTable({
                url: "/share/article/select",         //请求后台的URL（*）
                method: "GET",                      //请求方式（*）
                toolbar: "#toolbar",
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "desc",                   //排序方式
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                      //是否显示表格搜索
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                //得到查询的参数
                queryParams: function (params) {
                    //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                    var temp = {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        search: params.search
                    };
                    return temp;
                },
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'id',
                        title: '编号',
                        sortable: false,
                        align: 'center'
                    },
                    {
                        field: 'titleName',
                        title: '题目',
                        sortable: false,
                        align: 'center',
                        width: 300,
                        formatter: function(value,row,index) {
                            console.log(row);
                            return '<a target="_blank" href="/share/article/edit?id='+row.id+'">'+value+'</a>';
                        }
                    }, {
                        field: 'isRelease',
                        title: '类型',
                        sortable: false,
                        align: 'center',
                        width: 150,
                        formatter: function(value,row,index){
                            if(value==0){
                                return "草稿";
                            }else if(value==1) {
                                return "已发布";
                            }else {
                                return "未知";
                            }
                        }
                    }, {
                        field: 'labelNames',
                        title: '标签',
                        sortable: false,
                        align: 'center'
                    }, {
                        field: 'readTimes',
                        title: '浏览量',
                        sortable: false,
                        align: 'center',
                        width: 150
                    }, {
                        field: 'createTime',
                        title: '创建时间',
                        sortable: false,
                        align: 'center',
                        width: 200
                    }, {
                        title: '操作',
                        align: 'center',
                        formatter:function(value,row,index){
                            let e = '<button style="margin-right:5px" type="button" class="btn btn-primary" onclick="updateFun(\''+ row.id +'\', \''+row.titleName+'\')">修改</button>';
                            let d = '<button type="button" class="btn btn-danger" onclick="deleteFun(\''+ row.id +'\')">删除</button>';
                            return e+d;
                        }
                    }
                ],
                responseHandler: function (result) {
                    console.log("执行");
                    if(result.status==1){
                        return {
                            "total": result.data.total,
                            "rows": result.data.records
                        };
                    }
                },
                onLoadSuccess: function (data) {
                },
                onLoadError: function () {
                },
                onDblClickRow: function (row, $element) {
                    // var id = row.ID;
                    // EditViewById(id, 'view');
                }
            })
        }
        initMainTable();

        //切换到当前页面的事件
        window.onfocus = function(){
            //刷新表单
            $("#table").bootstrapTable('refresh');
        }

        function deleteFun(id) {
            let ids = new Array();
            ids.push(id);
            myConfirm("确认！", "确定要删除这些文章吗？", function(r) {
                if (r) {
                    $.ajax({
                        type: "post",
                        url: "/share/article/delete",
                        data: {
                            "ids": ids
                        },
                        success: function (data) {
                            if (data.status === 1) {
                                myAlert("提示", "删除成功", function(){
                                    $("#table").bootstrapTable("refresh");
                                })
                            } else {
                                myAlert("操作失败", data.message, function(){
                                    $("#table").bootstrapTable("refresh");
                                })
                            }
                        },
                        beforeSend: function () {
                        }
                    });
                }
            })
        }

        //创建文章
        $("#btn_insert").bind("click", function() {
            window.open("/share/article/edit");
        })

        //修改文章
        function updateFun(id, titleName) {
            window.open("/share/article/edit?id="+id, titleName);
        }

        //删除选中的文章
        $("#btn_delete").bind("click", function() {
            let a= $("#table").bootstrapTable("getSelections");
            if(a.length<=0){
                myAlert('系统提示',"请至少选择一篇文章");
            }else{
                myConfirm("确认！", "确定要删除这些文章吗？", function(r){
                    if(r){
                        let ids = new Array();
                        for(let i=0;i<a.length;i++){
                            ids.push(a[i].id);
                        }
                        $.ajax({
                            type: "post",
                            url: "/share/article/delete",
                            data: {
                                "ids": ids
                            },
                            success: function (data) {
                                if (data.status === 1) {
                                    myAlert("提示", "删除成功", function(){
                                        $("#table").bootstrapTable("refresh");
                                    })
                                } else {
                                    myAlert("操作失败", data.message, function(){
                                        $("#table").bootstrapTable("refresh");
                                    })
                                }
                            },
                            beforeSend: function () {
                            }
                        });
                    }
                })
            }
        })

        //设置自带的搜索
        $table.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                search:params.search
            };
            return temp;
        };
</script>
</html>
